import React, { useState } from 'react';
import { 
  Card, 
  Form, 
  Input, 
  InputNumber, 
  Select, 
  Switch, 
  Button, 
  Space, 
  Typography
} from 'antd';
import { 
  SaveOutlined, 
  SyncOutlined,
  SettingOutlined
} from '@ant-design/icons';
import { useThemeStore } from '../../../stores/themeStore';
import { getTheme } from '../../../theme/config';
import { motion } from 'framer-motion';
import { notification } from '../../../components/common'; // 导入自定义通知组件

const { Title, Text } = Typography;
const { Option } = Select;

const SystemConfiguration: React.FC = () => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 初始表单数据
  const initialFormData = {
    siteName: 'FastAPI Platform',
    siteDescription: '基于FastAPI的现代化管理平台',
    siteUrl: 'https://yourdomain.com',
    adminEmail: 'admin@yourdomain.com',
    timezone: 'Asia/Shanghai',
    language: 'zh-CN',
    maintenanceMode: false,
    maxUploadSize: 100,
    maxConcurrentTasks: 5,
    logRetentionDays: 30,
    enableUserRegistration: true,
    enableEmailVerification: true,
    enableCaptcha: false,
    captchaType: 'recaptcha',
    recaptchaSiteKey: '',
    recaptchaSecretKey: ''
  };

  const onFinish = (values: any) => {
    setLoading(true);
    // 模拟保存操作
    setTimeout(() => {
      console.log('保存的配置:', values);
      // 使用自定义通知组件替换 message.success
      notification.success({
        title: '系统配置保存',
        message: '系统配置已成功保存'
      });
      setLoading(false);
    }, 1000);
  };

  const onReset = () => {
    form.setFieldsValue(initialFormData);
    // 使用自定义通知组件替换 message.info
    notification.info({
      title: '配置重置',
      message: '已重置为默认配置'
    });
  };

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.3 }}
    >
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3 }}
      >
        <Title level={3} style={{ color: theme.textPrimary, marginBottom: 24 }}>
          系统配置
        </Title>
      </motion.div>
      
      <Form
        form={form}
        layout="vertical"
        initialValues={initialFormData}
        onFinish={onFinish}
      >
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3, delay: 0.1 }}
        >
          <Card
            style={{
              background: theme.cardBackground,
              borderColor: theme.cardBorder,
              borderRadius: '12px',
              boxShadow: theme.cardShadow,
              marginBottom: 24
            }}
            title="基本配置"
            headStyle={{ 
              color: theme.textPrimary,
              borderBottom: `1px solid ${theme.cardBorder}`
            }}
          >
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 0.2 }}
            >
              <Form.Item
                name="siteName"
                label="站点名称"
                rules={[{ required: true, message: '请输入站点名称' }]}
              >
                <Input 
                  placeholder="请输入站点名称"
                  style={{ 
                    borderRadius: '8px'
                  }}
                />
              </Form.Item>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 0.3 }}
            >
              <Form.Item
                name="siteDescription"
                label="站点描述"
              >
                <Input.TextArea 
                  rows={3} 
                  placeholder="请输入站点描述"
                  style={{ 
                    borderRadius: '8px'
                  }}
                />
              </Form.Item>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 0.4 }}
            >
              <Form.Item
                name="siteUrl"
                label="站点URL"
                rules={[
                  { required: true, message: '请输入站点URL' },
                  { type: 'url', message: '请输入有效的URL' }
                ]}
              >
                <Input 
                  placeholder="请输入站点URL"
                  style={{ 
                    borderRadius: '8px'
                  }}
                />
              </Form.Item>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 0.5 }}
            >
              <Form.Item
                name="adminEmail"
                label="管理员邮箱"
                rules={[
                  { required: true, message: '请输入管理员邮箱' },
                  { type: 'email', message: '请输入有效的邮箱地址' }
                ]}
              >
                <Input 
                  placeholder="请输入管理员邮箱"
                  style={{ 
                    borderRadius: '8px'
                  }}
                />
              </Form.Item>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 0.6 }}
            >
              <Form.Item
                name="timezone"
                label="时区"
                rules={[{ required: true, message: '请选择时区' }]}
              >
                <Select style={{ borderRadius: '8px' }}>
                  <Option value="Asia/Shanghai">Asia/Shanghai (UTC+8)</Option>
                  <Option value="Asia/Tokyo">Asia/Tokyo (UTC+9)</Option>
                  <Option value="Europe/London">Europe/London (UTC+0)</Option>
                  <Option value="America/New_York">America/New_York (UTC-5)</Option>
                </Select>
              </Form.Item>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 0.7 }}
            >
              <Form.Item
                name="language"
                label="语言"
                rules={[{ required: true, message: '请选择语言' }]}
              >
                <Select style={{ borderRadius: '8px' }}>
                  <Option value="zh-CN">中文 (简体)</Option>
                  <Option value="en-US">English (US)</Option>
                </Select>
              </Form.Item>
            </motion.div>
          </Card>
        </motion.div>
        
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3, delay: 0.8 }}
        >
          <Card
            style={{
              background: theme.cardBackground,
              borderColor: theme.cardBorder,
              borderRadius: '12px',
              boxShadow: theme.cardShadow,
              marginBottom: 24
            }}
            title="功能配置"
            headStyle={{ 
              color: theme.textPrimary,
              borderBottom: `1px solid ${theme.cardBorder}`
            }}
          >
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 0.9 }}
            >
              <Form.Item
                name="maintenanceMode"
                label="维护模式"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 1.0 }}
            >
              <Form.Item
                name="enableUserRegistration"
                label="启用用户注册"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 1.1 }}
            >
              <Form.Item
                name="enableEmailVerification"
                label="启用邮箱验证"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 1.2 }}
            >
              <Form.Item
                name="enableCaptcha"
                label="启用验证码"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 1.3 }}
            >
              <Form.Item
                noStyle
                shouldUpdate={(prevValues, currentValues) => prevValues.enableCaptcha !== currentValues.enableCaptcha}
              >
                {({ getFieldValue }) => 
                  getFieldValue('enableCaptcha') ? (
                    <motion.div
                      initial={{ opacity: 0, height: 0 }}
                      animate={{ opacity: 1, height: 'auto' }}
                      transition={{ duration: 0.3 }}
                    >
                      <Form.Item
                        name="captchaType"
                        label="验证码类型"
                        rules={[{ required: true, message: '请选择验证码类型' }]}
                      >
                        <Select style={{ borderRadius: '8px' }}>
                          <Option value="recaptcha">Google reCAPTCHA</Option>
                          <Option value="hcaptcha">hCaptcha</Option>
                        </Select>
                      </Form.Item>
                      
                      <Form.Item
                        noStyle
                        shouldUpdate={(prevValues, currentValues) => prevValues.captchaType !== currentValues.captchaType}
                      >
                        {({ getFieldValue }) => 
                          getFieldValue('captchaType') === 'recaptcha' && (
                            <motion.div
                              initial={{ opacity: 0, height: 0 }}
                              animate={{ opacity: 1, height: 'auto' }}
                              transition={{ duration: 0.3 }}
                            >
                              <Form.Item
                                name="recaptchaSiteKey"
                                label="reCAPTCHA 站点密钥"
                                rules={[{ required: true, message: '请输入reCAPTCHA站点密钥' }]}
                              >
                                <Input 
                                  placeholder="请输入reCAPTCHA站点密钥"
                                  style={{ 
                                    borderRadius: '8px'
                                  }}
                                />
                              </Form.Item>
                              
                              <Form.Item
                                name="recaptchaSecretKey"
                                label="reCAPTCHA 密钥"
                                rules={[{ required: true, message: '请输入reCAPTCHA密钥' }]}
                              >
                                <Input.Password 
                                  placeholder="请输入reCAPTCHA密钥"
                                  style={{ 
                                    borderRadius: '8px'
                                  }}
                                />
                              </Form.Item>
                            </motion.div>
                          )
                        }
                      </Form.Item>
                    </motion.div>
                  ) : null
                }
              </Form.Item>
            </motion.div>
          </Card>
        </motion.div>
        
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3, delay: 1.4 }}
        >
          <Card
            style={{
              background: theme.cardBackground,
              borderColor: theme.cardBorder,
              borderRadius: '12px',
              boxShadow: theme.cardShadow,
              marginBottom: 24
            }}
            title="性能配置"
            headStyle={{ 
              color: theme.textPrimary,
              borderBottom: `1px solid ${theme.cardBorder}`
            }}
          >
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 1.5 }}
            >
              <Form.Item
                name="maxUploadSize"
                label="最大上传大小 (MB)"
                rules={[{ required: true, message: '请输入最大上传大小' }]}
              >
                <InputNumber 
                  min={1} 
                  max={1000} 
                  style={{ width: '100%', borderRadius: '8px' }} 
                  placeholder="请输入最大上传大小"
                />
              </Form.Item>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 1.6 }}
            >
              <Form.Item
                name="maxConcurrentTasks"
                label="最大并发任务数"
                rules={[{ required: true, message: '请输入最大并发任务数' }]}
              >
                <InputNumber 
                  min={1} 
                  max={100} 
                  style={{ width: '100%', borderRadius: '8px' }} 
                  placeholder="请输入最大并发任务数"
                />
              </Form.Item>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.3, delay: 1.7 }}
            >
              <Form.Item
                name="logRetentionDays"
                label="日志保留天数"
                rules={[{ required: true, message: '请输入日志保留天数' }]}
              >
                <InputNumber 
                  min={1} 
                  max={365} 
                  style={{ width: '100%', borderRadius: '8px' }} 
                  placeholder="请输入日志保留天数"
                />
              </Form.Item>
            </motion.div>
          </Card>
        </motion.div>
        
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3, delay: 1.8 }}
        >
          <div style={{ textAlign: 'center' }}>
            <Space>
              <motion.div
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                animate={{ 
                  scale: [1, 1.02, 1],
                  transition: { 
                    duration: 2,
                    repeat: Infinity,
                    repeatType: "reverse"
                  }
                }}
              >
                <Button 
                  type="primary" 
                  htmlType="submit" 
                  icon={<SaveOutlined />}
                  loading={loading}
                  size="large"
                  style={{ 
                    background: theme.glowColor,
                    borderColor: theme.glowColor,
                    boxShadow: theme.cardShadow
                  }}
                >
                  保存配置
                </Button>
              </motion.div>
              <motion.div
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
              >
                <Button 
                  icon={<SyncOutlined />}
                  onClick={onReset}
                  size="large"
                  style={{ 
                    boxShadow: theme.cardShadow
                  }}
                >
                  重置
                </Button>
              </motion.div>
            </Space>
          </div>
        </motion.div>
      </Form>
    </motion.div>
  );
};

export default SystemConfiguration;